import React, { Component, createContext } from "react";
import Child1 from "./Child1";

const context = createContext();
export const { Provider, Consumer } = context;

// 在react的context上下文是具有响应式的
class App extends Component {
  state = {
    count: 3,
  };

  add = () => {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  minus = () => {
    this.setState((prevState) => {
      return {
        count: prevState.count - 1,
      };
    });
  };

  render() {
    return (
      <Provider
        value={{
          count: this.state.count,
          add: this.add,
          minus: this.minus,
        }}
      >
        <h2>context-counter计数器</h2>
        {/* <button onClick={this.add}>btn</button> */}
        <Child1 />
      </Provider>
    );
  }
}

export default App;
